<template>
  <el-dialog
    class="material-check-comp"
    title="审核反馈"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(1400)"
    :before-close="handleCancel">
    <el-form
      element-loading-custom-class="custom-load"
      :model="ruleForm"
      :rules="rules"
      label-suffix="："
      size="medium"
      ref="ruleForm"
      :label-width="$setRem(140)"
      class="rule-form"
    >
      <el-row>
        <el-col :span="10">
          审核状态：
          <el-select placeholder="请选择审核状态" v-model="reviewFlag">
            <el-option label="未审核" value="0">未审核</el-option>
            <el-option label="通过" value="1">通过</el-option>
            <el-option label="拒绝" value="2">拒绝</el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-table
          class="table-container"
          :data="tableData"
          element-loading-custom-class="custom-load"
          @selection-change="handleSelectionChange"
          row-key="id">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
          <el-table-column label="材料名称" prop="materialName" align="center"></el-table-column>
          <el-table-column label="规格/型号" prop="specs" align="center"></el-table-column>
          <el-table-column label="计划数量" prop="planNum" width="100" align="center"></el-table-column>
          <el-table-column label="累计到场数量" prop="totalNum" width="130" align="center"></el-table-column>
          <el-table-column label="单位" prop="unit" align="center"></el-table-column>
<!--          <el-table-column label="是否满足现场要求" width="110" align="center">-->
<!--            <template slot-scope="scope">-->
<!--              <el-switch-->
<!--                :disabled="true"-->
<!--                :value="scope.row.finishFlag"-->
<!--                active-value="1"-->
<!--                inactive-value="0"-->
<!--                active-text="是"-->
<!--                inactive-text="否"-->
<!--                active-color="#13ce66"-->
<!--                inactive-color="#ff4949">-->
<!--              </el-switch>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="备注" width="160" align="center" show-overflow-tooltip></el-table-column>-->
          <el-table-column label="计划进场时间" prop="planApproachDate" align="center"></el-table-column>
<!--          <el-table-column label="附件" prop="fileUrl" align="center" width="150">-->
<!--            <template slot-scope="scope">-->
<!--              <div class="file-text" v-if="scope.row.fileUrl">-->
<!--                <el-image-->
<!--                  v-if="/\.jpg|\.jpeg|\.png$/.test(scope.row.fileUrl)"-->
<!--                  class="img"-->
<!--                  :src="$checkUrl(scope.row.fileUrl)"-->
<!--                  :preview-src-list="[$checkUrl(scope.row.fileUrl)]">-->
<!--                </el-image>-->
<!--                <span-->
<!--                  v-else-->
<!--                  class="file-name"-->
<!--                  :title="files(scope.row.fileUrl).name"-->
<!--                  @click="handleUpload(scope.row.fileUrl)">-->
<!--                  {{ files(scope.row.fileUrl).name }}-->
<!--                </span>-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <span class="btn" @click="handleView(scope.row)">反馈记录</span>
            </template>
          </el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
        <el-pagination
          v-if="total > 10"
          :page-size="pageSize"
          :current-page="pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
      <el-row v-if="reviewFlag === '0'">
        <el-col :span="12">
          <el-form-item label="是否同意该反馈" prop="reviewFlag" required>
            <el-switch
              v-model="ruleForm.reviewFlag"
              active-value="1"
              inactive-value="2"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审核时间" prop="writeTime" required>
            <el-date-picker
              v-model="ruleForm.writeTime"
              format="yyyy-MM-d"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="请选择时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.reviewFlag === '2'">
          <el-form-item label="说明原因" prop="reason">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入原因"
              v-model="ruleForm.reason">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <view-record
      :visible="recordVisible"
      :materialData="materialData"
      @cancel="recordVisible = false">
    </view-record>
    <span v-show="reviewFlag === '0'" slot="footer" class="dialog-footer">
      <el-button
        size="medium"
        type="primary"
        @click="hanldeSave">
        提 交
      </el-button>
      <el-button size="medium" @click="handleCancel">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import viewRecord from '@/components/project/material/viewRecord';

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'add'
    },
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 10,
      pageNo: 1,
      // 0：未审核；1：通过；2：拒绝
      reviewFlag: '0',
      ruleForm: {
        reviewFlag: '1',
        reason: '',
        writeTime: this.$moment().format('YYYY-MM-DD')
      },
      rules: {
        writeTime: [
          { required: true, message: '请选择时间' },
        ],
      },
      recordVisible: false,
      materialData: {},
      multipleSelection: []
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
    // 审核反馈
    hasCheckFeedback() {
      return this.type === 'checkFeedback';
    },
  },
  watch: {
    visible(val) {
      if (!val) {
        this.ruleForm = {
          reviewFlag: '1',
          reason: '',
          writeTime: this.$moment().format('YYYY-MM-DD')
        };
        this.multipleSelection = [];
        this.reviewFlag = '0';
        return;
      }
      this.getReviewPlanDetailPage();
    },
    reviewFlag(val) {
      val && this.getReviewPlanDetailPage();
    }
  },
  components: {
    viewRecord
  },
  methods: {
    // 根据计划id获取需要审核的材料明细分页/根据明细id获取审核记录
    async getReviewPlanDetailPage() {
      const params = {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        reviewFlag: this.reviewFlag
      };
      this.tableLoading = true;
      const { success, data: {
        data
      }} = await this.$Model.getReviewPlanDetailPage(params);
      this.tableLoading = false;
      if (success && data) {
        const list = data.list || [];
        this.tableData = list.map(item => {
          const { materialPlanDetail, id } = item;
          return {
            ...materialPlanDetail,
            ...item,
            id
          };
        });
        this.total = data.total || 0;
      }
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getReviewPlanDetailPage();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getReviewPlanDetailPage();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 查看反馈记录
    handleView(row) {
      const { materialPlanDetail } = row;
      this.materialData = {
        ...row,
        id: materialPlanDetail.id
      };
      this.recordVisible = true;
    },
    // 附件
    files(fileUrl) {
      const fileNames = fileUrl ? fileUrl.match(/([^\/])+\.\w+$/) : '';
      const fileName = Array.isArray(fileNames) ? fileNames[0] : '';
      return {
        name: fileName,
        url: this.$checkUrl(fileUrl),
        hasImg: /\.jpg|\.jpeg|\.png$/.test(fileUrl)
      };
    },
    // 下载文件
    handleUpload(fileUrl) {
      fileUrl && window.open(this.$checkUrl(fileUrl));
    },
    handleCancel() {
      this.$emit('cancel');
    },
    // 保存
    hanldeSave(status) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (!this.multipleSelection.length) {
            this.$message.warning('请勾选选项');
            return;
          }
          this.$emit('submit', {
            ...this.ruleForm,
            selection: this.multipleSelection,
          });
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/table";
  @import "../../../assets/styles/dialog";
  .material-check-comp {
    .btns {
      margin: 10px 0;
      width: 100%;
      text-align: right;
    }
    /deep/ .el-form-item__content {
      min-width: 240px;
      max-width: 400px;
    }
    .table-container {
      margin: 20px 0;
      width: 100%;
      /deep/ .el-table__body-wrapper {
        min-height: 200px;
        max-height: 350px;
        overflow-y: auto;
        .file-text {
          max-width: 150px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding-right: 20px;
          .file-name {
            max-width: 130px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: relative;
          }
          .img {
            width: 100px;
            height: 65px;
          }
          i.file-delete {
            font-size: 16px;
            color: $mainColor;
            cursor: pointer;
          }
        }
        .btn {
          color: $mainColor;
          cursor: pointer;
        }
      }
    }
    .file-disable {
      /deep/ .el-upload {
        .el-button {
          span {
            color: #fff;
          }
        }
      }
    }
  }
</style>
